<template>
  <div class="content-wrapper">
    <div class="content-container">
      <div v-if="multipleSelection.length > 0" class="filter-container">
        <span class="filter-item filter-item-label">批量操作 </span>
        <el-button
          size="mini"
          round
          class="filter-item"
          @click="remind"
        >提醒自学</el-button>
      </div>
      <el-table
        ref="ref-dataList"
        v-loading="listLoading"
        height="65vh"
        :data="
          dataList.filter(
            (data) =>
              !search ||
              data.userName.toLowerCase().includes(search.toLowerCase())
          )
        "
        highlight-current-row
        default-expand-all
        @selection-change="handleSelectionChange"
      >
        <!-- <el-table-column type="selection" width="55" /> -->
        <!-- :selectable="checkSelectable" -->
        <el-table-column label="自学人员" prop="userName" width="200px">
          <template slot="header" slot-scope="scope">
            <el-input
              v-model="search"
              size="mini"
              placeholder="根据自学人员搜索"
            />
          </template>
        </el-table-column>
        <el-table-column label="所属部门" prop="userGroupName" width="160px" />
        <el-table-column
          label="是否自学"
          prop="learnDurationString"
          width="160px"
        />
        <el-table-column
          label="学习总时长"
          prop="learnDurationString"
          min-width="160px"
        />
        <el-table-column
          label="学习详情"
          align="center"
          width="150px"
          fixed="right"
        >
          <template slot-scope="{ row }">
            <el-dropdown trigger="click" class="filter-item">
              <el-button type="text" class="el-icon-more" />
              <el-dropdown-menu slot="dropdown" class="user-dropdown">
                <el-dropdown-item>
                  <el-popover placement="left" width="400" trigger="hover">
                    <el-table
                      class="my-popover-table"
                      :data="row.trainDocumentRelResponses"
                    >
                      <el-table-column
                        label="文档名称"
                        prop="documentName"
                        min-width="200px"
                      />

                      <el-table-column
                        width="100"
                        property="examineeTime"
                        label="学习时长"
                      />
                      <el-table-column
                        width="100"
                        property="score"
                        label="学习次数"
                      />
                    </el-table>
                    <span slot="reference">详情</span>
                  </el-popover>
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import ExaminationRecordView from '@/views/train/components/ExaminationRecordView'
import { remindTest } from '@/api/ts/train.js'

export default {
  components: { ExaminationRecordView },
  props: ['examinationData'],
  data() {
    return {
      dataList: [],
      total: 0,
      paperOptions: [],
      userGroupOptions: [],
      listQuery: {
        pageIndex: 0,
        pageNumber: 1,
        pageSize: 5,
        examineePaperId: null,
        examineeUserGroupId: null,
        examineeUserName: null,
        passFlag: null
      },
      listLoading: false,
      recordViewDialog: false, // 查看对话框
      propsData: null,
      multipleSelection: [],
      search: '',
      title:''
    }
  },
  watch: {
    examinationData(data) {
      const res = data.data.rows || []
      res.forEach((item) => {
        if (item.trainDocumentRelResponses) {
          item.trainDocumentRelResponses.forEach((item2, index) => {
            item2.userId = item.userId + index
          })
        }
      })
      res.forEach((item) => {
        item.disabled = true
      })
      this.dataList = data.data
    }
  },
  mounted() {
    if (this.examinationData) {
      console.log(this.examinationData, 'examinationData')
    }
  },
  methods: {
    viewRecord(row) {
      this.$emit(
        'viewRecord',
        row.examinationRecordResponses[0].examinationRecordId
      )
    },
    handleFilter() {},
    viewAttachment(row) {
      console.log(row)
      remindTest({
        trainName: row.documentName,
        userIds: [row.userId]
      }).then((res) => {
        if (res.code == 1) {
          this.$message.success('提醒成功')
        }
      })
    },
    checkSelectable(row) {
      return row.disabled
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    remind() {
      var userIds = []
      this.multipleSelection.forEach((res) => {
        userIds.push(res.userId)
      })
      console.log(this.multipleSelection)
      // remindTest({
      //   trainName: row.documentName,
      //   userIds: userIds
      // }).then((res) => {
      //   if (res.code == 1) {
      //     this.$message.success('提醒成功')
      //   }
      // })
    },
    viewRecordId(row) {
      console.log(row)
      return row.trainId * Math.ceil(Math.random() * 10000)
    }
  }
}
</script>

<style lang="scss" scoped>
.view_record .el-dialog .el-dialog__header {
  padding: 0px !important;
}
.view_record .el-dialog .el-dialog__body {
  padding: 30px 0px !important;
}
.my-form {
  .el-form-item__label {
    font-weight: unset;
  }
}
</style>
